<template>
  <div class="wb-item-jewellery-video" :style="itemStyle" @click.stop.prevent>
    <img class="item-img" :src="qItem.itemUrl"  :style="getImgItemStyle"/>
    <video-item :item="qItem" :compItem="getCompItem" :pageId="pageId" :popId="popId" :isRight="false" :style="getVideoItemStyle"></video-item>
    <div class="name">
      <strong>{{qItem.name}}</strong>
    </div>
    <div class="info text" :style="getTextStyle">{{qItem.text}}</div>
    <div v-if="commonAttr.isBtn" class="btn-con" @click.stop="onClick">
      <van-button :style="btnStyles" class="item-in-btn">{{ btnText }}</van-button>
    </div>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { EventBus } from '@/store/index'
import VideoItem from '@/components/items/video-item.vue'
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'

export default {
  mixins: [utils],
  props: ["qItem"],
  components: {
    VideoItem,
  },
  computed: {
    getCompItem(){
      let item_ = _.cloneDeep(this.item);
      let videoWidth = MOBILE_WID_HEI.width;
      let videoHeight = 420;
      if(this.commonAttr.itemParams){
        let itemParams = JSON.parse(this.commonAttr.itemParams);
        videoHeight = itemParams.videoHeight;

        if(itemParams.videoWidth > 0){
          videoWidth = itemParams.videoWidth;
        }
      }
      item_.conAttr.width = videoWidth;
      item_.conAttr.height = videoHeight;
      return item_;
    },
    getImgItemStyle(){
      let imgWidth = MOBILE_WID_HEI.width;//"100%"
      if(this.commonAttr.itemParams){
        let itemParams = JSON.parse(this.commonAttr.itemParams);
        if(itemParams.imgWidth > 0){
          imgWidth = itemParams.imgWidth;
        }
      }
      return {
        width: getPxOVwByValue(imgWidth),
        marginLeft: getPxOVwByValue((MOBILE_WID_HEI.width - imgWidth)/2),
      }
    },
    getVideoItemStyle(){
      let videoWidth = MOBILE_WID_HEI.width;//"100%"
      let videoHeight = 420;
      let videoTop = 0;
      if(this.commonAttr.itemParams){
        let itemParams = JSON.parse(this.commonAttr.itemParams);
        videoHeight = itemParams.videoHeight;

        if(itemParams.videoWidth > 0){
          videoWidth = itemParams.videoWidth;
        }
        if(itemParams.videoTop > 0){
          videoTop = itemParams.videoTop;
        }
      }
      let styles_ = {
        width: getPxOVwByValue(videoWidth),
        height: getPxOVwByValue(videoHeight),
        marginLeft: getPxOVwByValue((MOBILE_WID_HEI.width - videoWidth)/2),
      }
      if(videoTop){
        styles_.marginTop = getPxOVwByValue(videoTop);
      }

      return styles_;
    },
    itemStyle(){
      let styles_ = {};
      let styles = this.item.styles;
      styles_.color = styles.color;
      styles_.lineHeight = styles.lineHeight;
      styles_.fontSize = styles.fontSize;
      styles_.backgroundImage = "url(" + this.qItem.bgUrl + ")";
      return styles_
    },
    getTextStyle(){
      // let unit = getPxOrVw();
      let styles_ = {};//_.cloneDeep(this.item.styles);
      let lineNum = this.item.commonAttr.lineNum;
      // styles_.marginTop = getPxOVwByValue(lineNum == 1 ? 2 * 10 : 1 * 10);
      // let lineHeight = this.item.styles.lineHeight;
      // let fontSize = this.item.commonAttr.fontSize;
      // styles_.fontSize = fontSize * 0.8 + unit;
      // let textHeight = fontSize*lineHeight*lineNum;

      styles_['-webkit-line-clamp'] = lineNum;
      // styles_.minHeight = textHeight + unit;
      // delete styles_.backgroundColor;

      return styles_;
    },
    getSwiperClassBySlideIndex(){
      return ['swiper-container-' + '-' + _.random(0, 1000)]
    },
    getScrollbarClassBySlideIndex(){
      return ['swiper-scrollbar-' + '-' + _.random(0, 1000)]
    },
    btnText(){
      return this.item.btn.bgUrl.length > 0 ? ' ' : this.item.btn.title
    },
  },
  methods: {
    onClick(){
      EventBus.$emit("itemClick", {id: this.item.id, index: this.index});
    }
  },
  mounted() {
    if(window.Swiper){
      this.swiper = new window.Swiper('.' + this.getSwiperClassBySlideIndex[0], {
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.' + this.getScrollbarClassBySlideIndex[0],
        },
        mousewheel: true,
      });
    }
  },
  beforeUnmount(){
    if(this.swiper && this.swiper.destroy){
      this.swiper.destroy();
    }
  }
};
</script>

<style lang="scss">
.wb-item-jewellery-video {
  width: inherit;
  height: inherit;
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .vertical-scroll{
    .swiper-slide {
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .slide-img{
      width: 100%;
      object-fit: contain;
    }
  }

  .item-img {
    width: inherit;
    object-fit: contain;
  }

  .name {
    font-size: inherit;
    width: inherit;
    text-align: center;
    line-height: 2;
  }
  .info {
    width: inherit;
    color: inherit;
    margin: 0;
    font-size: 80%;
    text-align: justify;
    padding: 0 8%;
  }
}
</style>


